<template>
  <cp-nav-bar title="转盘抽奖" @click-right="$router.go(-1)" style="background: none;"></cp-nav-bar>

  <div class="dial-animate-wrap">
    <div class="dial-bg" :style="rotateStyle"><img :src="stateData.prize_img" alt=""></div>
    <div class="dial-run" @click="run">
      <div>点击抽奖</div>
    </div>
    <div class="dial-mork-wrap" @touchmove.prevent.stop v-if="isrun"></div>
    <!-- 抽奖进行中，禁用页面所有操作 z-index: 99; -->
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { showToast, showSuccessToast, showFailToast } from 'vant';
import { setLuckydraw } from '@/services/user';
const props = defineProps({
  httpData: {}, // 接口调用所需参数
  stateData: {
    type: Object,
    default: () => {
      return {
        coin: 0, // 超级币数量
        prize_img: '' // 转盘图片
      }
    }
  }
})
const isrun = ref(false)

const rotateAngle = ref(0)// 旋转角度
const config =
{
  duration: 4000, // 总旋转时间 ms级
  circle: 8, // 旋转圈数
  mode: 'ease-in-out' // 由快到慢 惯性效果都省了
}

const cricleAdd = ref(1)// 第几次抽奖
const drawIndex = ref(0)// 中奖索引 转盘图片排序 指针右手开始 0-...
const index = ref(1)
const WinningItems = reactive([
  {
    title: "10积分"
  },
  {
    title: "80积分"
  },
  {
    title: "擦肩而过"
  },
  {
    title: "20积分"
  },
  {
    title: "10积分"
  },
  {
    title: "100积分"
  },
  {
    title: "20积分"
  },
  {
    title: "200积分"
  },
])
const rotateStyle = computed(() => {
  const _c = config
  return `
        -webkit-transition: transform ${_c.duration}ms ${_c.mode};
        transition: transform ${_c.duration}ms ${_c.mode};
        -webkit-transform: rotate(${rotateAngle.value}deg);
            transform: rotate(${rotateAngle.value}deg);`
})

const run = async () => {
  let randomNumbe: number
  let Message: string
  const res = await setLuckydraw()
  if ((res.resultNum as unknown as number) == 1) {
    randomNumbe = res.resultObject.resultType
    Message = res.resultMessage
  } else {
    Message = res.resultMessage
    showFailToast(Message);
    return
  }


  if (isrun.value) return
  // const data = await goDraw()
  // 可以作为弹窗等信息展示
  // $set(stateData, 'coin', 0) // 更新数据，此处仅为示例，推荐使用 draw_fin方法的 start/fin 进行相应数据更新
  isrun.value = true
  rotateAngle.value = config.circle * 360 * cricleAdd.value - (22.5 + drawIndex.value * 45)

  // 圈数位置解析
  // config.circle * 360 * cricleAdd 顺时针总圈数/累积总圈数
  // 22.5 + drawIndex * 45 ===> (奖品位置 === drawIndex * 45) (指针中间位置 === 22.5)

  cricleAdd.value++;


  // 通过 randomNumbe
  rotateAngle.value = rotateAngle.value + (randomNumbe + 1) * 45
  setTimeout(() => {
    showSuccessToast(Message);
    isrun.value = false
  }, config.duration)
}


</script>

<style lang="scss" scoped>
.dial-mork-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden
}

.dial-animate-wrap {
  width: 100vw;
  /* height: 100vh; */
  position: relative;
  overflow: hidden;

  ::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .dial-bg {
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;

    }
  }

  .dial-run {
    width: 35vw;
    height: 35vw;
    background: url('@/assets/img/dial/dial-center-icon.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;

    div {
      font-size: 14px;
      font-weight: bold;
      color: #FF1717;
      line-height: 35vw;
      /* padding-top: 14.2vw;
      padding-bottom: 12px; */
    }

    p {
      font-size: 0.2rem;
      font-weight: bold;
      color: #834F36;
      line-height: 0.2rem;
    }
  }
}
</style>
